<template>
  <div id="daily-area" class="col">
    <div
      id="area-display-button"
      :class="'area-' + (Show ? 'hide' : 'show')"
      @click="switchDisplay"
    >
      {{ Show ? "◿" : "○" }}
    </div>
    <div v-if="Show" style="width: 100%">
      <div class="item item-add row" @click="addEntry()">添加</div>
      <div
        v-for="(item, i) in TodayDaily"
        v-bind:key="item"
        :class="'item row ' + (item.done ? 'item-deleted' : '')"
      >
        <div class="item-content">{{ item.name }}</div>
        <div
          :class="'row item-' + (item.done ? 'unfinish' : 'finish')"
          @click="toggleFinishEntry(i)"
        >
          {{ item.done ? "-" : "○" }}
        </div>
        <div class="item-delete row" @click="deleteEntry(i)">×</div>
      </div>
    </div>
  </div>
</template>

<script>
let notificationPermitted = false;
// 格式化时间
function formatTime(time) {
  // 格式化
  let hours = Math.floor(time / 1000 / 60 / 60);
  time -= hours * 60 * 60 * 1000;
  hours %= 24;
  let mins = Math.floor(time / 1000 / 60);
  time -= mins * 60 * 1000;
  let secs = Math.floor(time / 1000);
  time -= mins * 1000;
  //let mss = remainTick
  let result =
    (hours ? `${hours}时` : "") +
    (hours || mins ? `${mins}分` : "") +
    `${secs}秒`;
  return result;
}

var typeName = ["record", "plan"];
var typeList = ["记录", "计划"];

/* 计时相关 */
export default {
  name: "List",
  data() {
    return {
      Show: true,
      Type: 0,
      List: [],
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    nextType() {
      this.Type = (this.Type + 1) % typeList.length;
      this.loadData();
    },
    saveData() {
      switch (this.Type) {
        case 0: {
          localStorage.recordList = this.List ? JSON.stringify(this.List) : [];
          break;
        }
        case 1: {
          localStorage.planList = this.List ? JSON.stringify(this.List) : [];
          break;
        }
      }
    },
    loadData() {
      switch (this.Type) {
        case 0: {
          this.List = localStorage.recordList
            ? JSON.parse(localStorage.recordList)
            : [];
          break;
        }
        case 1: {
          this.List = localStorage.planList
            ? JSON.parse(localStorage.planList)
            : [];
          break;
        }
      }
    },
    addEntry() {
      switch (this.Type) {
        case 0: {
          this.List.splice(0, 0, {
            time: new Date().getTime(),
            content: "",
          });
          break;
        }
        case 1: {
          this.List.splice(0, 0, {
            time: new Date().getTime(),
            content: "",
            finished: false,
          });
          break;
        }
      }
    },
    deleteEntry(index) {
      this.List.splice(index, 1);
    },
    toggleFinishEntry(index) {
      this.List[index].finished = !this.List[index].finished;
      if (this.Type == 1) {
        this.List.sort((a, b) => b.time - a.time);
        this.List.sort((a, b) => {
          if (a.finished != b.finished) return a.finished ? 1 : -1;
          else return 0;
        });
      }
    },
    exportCsv() {
      // 生成csv
      var csv = "";
      switch (this.Type) {
        case 0: {
          for (entry of vmList.$data.List) {
            csv += tickToDateTime(entry.time) + "," + entry.content + "\n";
          }
          var filename = new Date().toLocaleDateString() + "_work.csv";
          break;
        }
        case 1: {
          for (entry of vmList.$data.List) {
            csv +=
              tickToDateTime(entry.time) +
              "," +
              entry.content +
              "," +
              (entry.finished ? "finished" : "unfinished") +
              "\n";
          }
          var filename = new Date().toLocaleDateString() + "_plan.csv";
          break;
        }
        default: {
          return;
        }
      }
      createDownload(csv, filename);
    },
    clear() {
      if (confirm("确认清空所有数据？")) this.List = [];
    },
  },
  watch: {
    List() {
      this.saveData();
    },
  },
};
</script>

<style scoped>
#list-area{
    position: relative;
    width: 100%;
    min-width: 200px;
    max-width: 400px;
    border-radius: 10px;
    padding: 10px;
}
.list-background-record{
    background: linear-gradient(to bottom, rgb(231, 218, 255), rgb(249, 255, 251)) ;
}
.list-background-plan{
    background: rgb(255, 221, 242);
}
.item{
    position: relative;
    width: 100%;
    transition: all 0.3s;

    display: flex;
    justify-content: space-around;
    align-items: center;
}
.item-deleted{
    opacity: 0.3;
}
.item-deleted::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    top: calc(50% - 0.5px);
    left: 0;
    background-color: black;
}
.item-add{
    height: 20px;
    width: calc(100% - 20px);
    margin: 5px;
    padding: 5px;
    justify-content: center;
    
    border-radius: 16px;
    background-color: rgb(24, 146, 44);
    color: white;
    cursor: pointer;

    transition: background-color 0.2s ease-out;
}
.item-add:hover{
    background-color: rgb(98, 209, 117);
}

.item-export-csv {
    height: 14px;
    width: 80px;
    margin: 5px;
    padding: 5px;
    justify-content: center;
    
    border-radius: 16px;
    background-color: rgb(207, 176, 140);
    color: white;
    cursor: pointer;

    transition: background-color 0.2s ease-out;
}
.item-export-csv :hover{
    background-color: rgb(209, 148, 98);
}

.item-clear {
    height: 14px;
    width: 80px;
    margin: 5px;
    padding: 5px;
    justify-content: center;
    
    border-radius: 16px;
    background-color: rgb(185, 102, 102);
    color: white;
    cursor: pointer;

    transition: background-color 0.2s ease-out;
}
.item-clear :hover{
    background-color: rgb(209, 98, 98);
}
.item-time{
    margin: 0 5px;
}
.item-content{
    margin: 0 5px;
    width: 100%;
}
.item-content-input{
    outline: 0;
    border: 0;
    border-bottom: 1px black solid;
    margin: 0 5px;
    background: transparent;
}
.item-content-input:focus{
    outline: 0;
}
.item-delete{
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: rgb(148, 34, 34);
    background-color: rgba(255, 176, 176, 0);
    transition: all 0.2s ease-out;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.item-delete:hover{
    color: rgb(148, 34, 34);
    background-color: rgba(255, 176, 176, 0.3);
}
.item-finish{
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: rgb(34, 148, 100);
    background-color: rgba(176, 255, 212, 0);
    transition: all 0.2s ease-out;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.item-finish:hover{
    color: rgb(34, 148, 95);
    background-color: rgba(176, 255, 212, 0.3);
}
.item-unfinish{
    width: 30px;
    height: 30px;
    font-size: 20px;
    color: rgb(133, 133, 133);
    background-color: rgba(202, 202, 202, 0);
    transition: all 0.2s ease-out;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.item-unfinish:hover{
    color: rgb(150, 150, 150);
    background-color: rgba(192, 192, 192, 0.3);
}

.item-type{
    width: calc(100% - 20px);
    height: 22px;
    font-size: 14px;
    transition: all 0.2s ease-out;
    border-radius: 20px;
    justify-content: space-around;
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.item-type-record{
    border:  rgb(73, 40, 134) 2px solid;
}
.item-type-plan{
    border: rgb(143, 32, 101) 2px solid;
}
.item-type-text{
    color: white;
    transition: opacity 0.2s ease-out;
    z-index: 1;
    font-weight: bold;
}
.item-text-background{
    position: absolute;
    background-color: black;
    left: 0;
    height: 100%;
    width: 50%;
    transition: 0.1s ease-out;
}
.item-text-background-record{
    left: 0;
    background-color: rgb(73, 40, 134);
}
.item-text-background-plan{
    left: 50%;
    background-color: rgb(143, 32, 101);
}

.list-enter-active, .list-leave-active {
    transition: opacity 0.2s;
    opacity: 0;
}
.list-enter-to {
    opacity: 1;
}
.list-leave-active{
    position: absolute;
    left: 0;
    transition: opacity 0.1s;
    opacity: 1;
}
.list-leave-to{
    opacity: 0;
}
.list-move {
    transition: transform 0.3s;
}
</style>
